import { Col, Row, Image, Button, Input, Divider } from "antd"
import React, { useEffect, useRef, useState } from "react"
import Layout from "../../components/layout"
import { ProductItemFace } from "../../components/productItem"
import { API } from "../../config"
import { delCartItem, getCart, Pay, TotalPrice, updateCartItem } from "../../hooks/cart"


export interface CartItem extends ProductItemFace {
    count: number
}

const Cart = () => {
    const [cart, setCart] = useState<CartItem[]>([])
    const [addr, setAddr] = useState<string>('')
    const [totalPrice, setTotalPrice] = useState<number>(0)
    const [payParams, setPayParams] = useState<{
        totalAmount: number;
        subject: string;
        body: string;
        products: {
            product: string;
            count: number;
        }[];
        address: string;
        userId?: string | undefined;
    }>({
        totalAmount: totalPrice,
        subject: '测试标题',
        body: '测试描述',
        products: cart.map(el => {
            return { product: el._id, count: el.count }
        }),
        address: addr,
    })

    useEffect(() => {
        setCart(getCart())
    }, [])

    useEffect(() => {
        setPayParams({
            totalAmount: totalPrice,
            subject: '测试标题',
            body: '测试描述',
            products: cart.map(el => {
                return { product: el._id, count: el.count }
            }),
            address: addr,
        })
    }, [addr, cart, totalPrice])

    return (
        <Layout title="购物车" subtitle="付了款，我就是你的了">
            <Row gutter={16}>
                <Col span="16">
                    <table style={{ width: '100%' }}>
                        <thead className="ant-table-thead">
                            <tr>
                                <th className="ant-table-cell">商品封面</th>
                                <th className="ant-table-cell">商品名称</th>
                                <th className="ant-table-cell">商品价格</th>
                                <th className="ant-table-cell">商品分类</th>
                                <th className="ant-table-cell">商品数量</th>
                                <th className="ant-table-cell">操作</th>
                            </tr>
                        </thead>
                        <tbody className="ant-table-tbody">
                            {
                                cart.map((el, index: number) => {
                                    return (<tr className="ant-table-row" key={el._id}>
                                        <td className="nat-table-cell">
                                            <Image width={120} src={`${API}/product/photo/${el._id}`}></Image>
                                        </td>
                                        <td className="nat-table-cell">{el.name}</td>
                                        <td className="nat-table-cell">{el.price}</td>
                                        <td className="nat-table-cell">{el.category.name}</td>
                                        <td className="nat-table-cell">
                                            <Input type="number" value={el.count} onChange={(e) => {
                                                let arr = updateCartItem(el._id, +e.target.value)
                                                setCart(arr)
                                            }}></Input>
                                        </td>
                                        <td className="nat-table-cell">
                                            <Button danger type="primary" onClick={() => setCart(delCartItem(cart, index))}>删除</Button>
                                        </td>
                                    </tr>)
                                })
                            }
                        </tbody>
                    </table>
                </Col>
                <Col span="8">
                    <Row>
                        <Input value={addr} onChange={(e) => setAddr(e.target.value)} placeholder="请输入收货地址"></Input>
                    </Row>
                    <Divider></Divider>
                    <Row>
                        <TotalPrice cart={cart} setTotalPrice={setTotalPrice}></TotalPrice>
                    </Row>
                    <Row>
                        <Pay {...payParams}></Pay>
                    </Row>
                </Col>
            </Row>
        </Layout>
    )
}

export default Cart
